{% extends 'base_dashboard.html' %}

{% block title %}Certificate details — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
  <div>
    <h4 class="fw-bold mb-1">Certificate details</h4>
    <p class="text-muted small mb-0">Score and certificate information for {{ certificate.recipient_name }}</p>
  </div>
  <a href="{{ back_url }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>Back
  </a>
</div>

{% if certificate.is_revoked %}
<div class="alert alert-danger rounded-4">This certificate has been revoked{% if certificate.revoke_reason %}: {{ certificate.revoke_reason }}{% endif %}.</div>
{% endif %}

<div class="row g-4">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm rounded-4">
      <div class="card-body p-4">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="text-muted small">Student name</div>
            <div class="fw-bold">{{ certificate.recipient_name }}</div>
          </div>
          <div class="col-md-6">
            <div class="text-muted small">Program / course</div>
            <div class="fw-bold">{{ certificate.program_title }}</div>
          </div>
          <div class="col-md-6">
            <div class="text-muted small">Score</div>
            <div class="fw-bold text-success fs-4">{{ certificate.score_percent|floatformat:1 }}%</div>
          </div>
          <div class="col-md-6">
            <div class="text-muted small">Issue date</div>
            <div class="fw-bold">{{ certificate.issued_at|date:"d M Y" }}</div>
          </div>
          <div class="col-md-6">
            <div class="text-muted small">Certificate ID</div>
            <div class="fw-bold font-monospace">{{ certificate.verification_code }}</div>
          </div>
          <div class="col-md-6">
            <div class="text-muted small">Verify at</div>
            <div class="fw-semibold small"><a href="{{ verify_url }}" target="_blank" rel="noopener">{{ verify_url }}</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm rounded-4 h-100">
      <div class="card-body p-4">
        <h6 class="fw-bold mb-3">Actions</h6>
        <p class="small text-muted">
          You can download a <strong>soft copy</strong> for your records. Soft copies are clearly marked and are not the original hard-copy certificate.
          Official hard copies are printed and issued by academy staff.
        </p>
        <div class="d-grid gap-2">
          <a href="{% url 'certifications:certificate_soft' certificate.verification_code %}" class="btn btn-primary">
            <i class="bi bi-download me-1"></i>Download soft copy
          </a>
          <a href="{% url 'certifications:verify' %}?code={{ certificate.verification_code }}" class="btn btn-outline-primary">
            <i class="bi bi-shield-check me-1"></i>Open verification page
          </a>
          {% if can_print_hard %}
          <a href="{% url 'certifications:certificate_hard' certificate.verification_code %}" class="btn btn-outline-success">
            <i class="bi bi-printer me-1"></i>Print official hard copy
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}